<template>
  <bm-marker :position="markerPoint" :icon="markerIcon" :offset="offset" :dragging="idDragging" @click="infoWindowOpen">
    <bm-info-window
      :show="infoWindowShow"
      :width="infoWindowWidth"
      :height="infoWindowHeight"
      @close="infoWindowClose"
      @open="infoWindowOpen"
    >
      <slot>
        <div v-if="infoWindowType=='enterprise'" class="enterprise">
          <div class="enterprise_head">
            <div class="enterprise_img">{{enterpriseInfo.enterpriseImgUrl}}</div>
            <div>
              <div class="title">{{enterpriseInfo.enterpriseName}}</div>
              <div>区域：{{enterpriseInfo.enterpriseAddress}}</div>
              <div>
                {{enterpriseInfo.enterpriseTel}}
              </div>
              <div>
                {{enterpriseInfo.enterpriseAd}}
              </div>
              <div>
                <span>{{enterpriseInfo.enterpriseOrigin1}}</span>
                <span>{{enterpriseInfo.enterpriseOrigin2}}</span>
                <span>{{enterpriseInfo.enterpriseOrigin3}}</span>
              </div>
            </div>
          </div>
          <div class="infoFooter">
            档案信息
          </div>
        </div>
        <div v-else-if="infoWindowType=='enterpriseOrigin'" class="enterpriseOrigin">
          <div class="title">{{enterpriseOriginInfo.enterpriseOriginName}}</div>
          <div>区域：{{enterpriseOriginInfo.enterpriseOriginAddress}}</div>
          <div>{{enterpriseOriginInfo.enterpriseOriginTel}}</div>
          <div style="margin-bottom: 5px;">{{enterpriseOriginInfo.enterpriseOriginCity}}</div>
          <div class="infoFooter">视频监控</div>
        </div>
        <div v-else-if="infoWindowType=='origin'" class="origin">
          <div>
            <div class="title">{{originInfo.originName}}</div>
            <div>用途：{{originInfo.originUse}}</div>
            <div>类别：{{originInfo.originType}}</div>
            <div>目视码：{{originInfo.originCode}}</div>
            <div style="margin-bottom: 5px;">源国家编码：{{originInfo.originToolCode}}</div>
          </div>
          <div>
            <div class="infoFooter">视频监控</div>
            <div class="infoFooter">源空间</div>
          </div>
        </div>
        <div v-else-if="infoWindowType=='person'" class="person">
          <div class="person_img">{{personInfo.personImgUrl}}</div>
          <div>
            <div class="title">{{personInfo.personName}}</div>
            <div>
              <span>类型:</span>
              <span>{{personInfo.personType}}</span>
            </div>
            <div>{{personInfo.personTel}}</div>
          </div>
        </div>
        <div v-else-if="infoWindowType=='car'" class="car">
          <div class="title">车牌：{{carInfo.carCode}}</div>
          <div>是否有源:{{carInfo.carHasOrigin}}</div>
          <div style="margin-bottom: 5px;">
            <span>源编码：{{carInfo.carOriginCode}}</span>
            <span></span>
            <span>核素名：{{carInfo.carNuclideCode}}</span>
            <span></span>
            <span>剂量：{{carInfo.carOriginNum}}</span>
            <span></span>
          </div>
          <div class="infoFooter">视频监控</div>
        </div>
      </slot>
    </bm-info-window>
  </bm-marker>
</template>

<script>
import BmMarker from "vue-baidu-map/components/overlays/Marker"; // marker标记组件
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow"; // 浮框组件

/**
 * @author luyun
 * @summary 自定义标签及浮框组件，可自定义marker的图标和自定义的浮框显示
 */
export default {
  components: {
    BmMarker,
    BmInfoWindow
  },
  props: {
    idDragging: {
      type: Boolean,
      default: false
    },
    markerIcon: { // marker标记的图标
      type: Object,
      default: function(){
        return {}
      }
    },
    infoWindowType: {// 浮框类型，默认为"enterprise"。选项值"enterprise","enterpriseOrigin","origin","person","car"
      type: String,
      default: "enterprise"
    },
    infoWindowInfo: { // 浮框信息，
      type: Object,
      default: function() {
        return { enterpriseInfo: {}}
      }
    },
    isInfoWindowClickShow: { // 点击时是否出现弹出框
      type: Boolean,
      default: false
    },
    infoWindowWidth: {
      // 浮框宽度，220 - 730,默认为0，若为0，则根据内容自适应
      type: Number,
      default: 0
    },
    infoWindowHeight: {
      // 浮框高度，60 - 650,默认为0，若为0，则根据内容自适应
      type: Number,
      default: 0
    },
    markerPoint: {
      // 标记的坐标，用于定位
      type: Object,
      default: function() {
        return {lng: 116.404, lat: 39.915};
      }
    },
    offset: {
      type: Object,
      default: function() {
        return {width: -5,height: -10}
      }
    },
    enterpriseInfo: {
      type: Object,
      default: function() {
        return {
          enterpriseImgUrl: "图片",
          enterpriseName: '**某某企业',
          enterpriseAddress: '某某区',
          enterpriseTel: '000-000',
          enterpriseAd: '88路88号',
          enterpriseOrigin1: '附属库源',
          enterpriseOrigin2: '源库A',
          enterpriseOrigin3: '源库B'
        }
      }
    },
    enterpriseOriginInfo: {
      type: Object,
      default: function() {
        return {
          enterpriseOriginName: '**企业**源库',
          enterpriseOriginAddress: '某某区',
          enterpriseOriginTel: '000-000',
          enterpriseOriginCity: '默默市'
        }
      }
    },
    originInfo: {
      type: Object,
      default: function() {
        return {
          originName: '某某源',
          originUse: '',
          originType: '',
          originCode: '',
          originToolCode: ''
        }
      }
    },
    personInfo: {
      type: Object,
      default: function() {
        return {
          personName: '某某',
          personImgUrl: '图片',
          personType: '******',
          personTel: '7897979'
        }
      }
    },
    carInfo: {
      type: Object,
      default: function(){
        return {
          carCode: '342252',
          carHasOrigin: '是',
          carOriginCode: 'fdf',
          carNuclideCode: '核素',
          carOriginNum: '剂量'
        }
      }
    }
  },
  data() {
    return {
      infoWindowShow: false
    };
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    infoWindowClose() {
      this.infoWindowShow = false;
    },
    infoWindowOpen() {
      if(!this.isInfoWindowClickShow) return
      this.infoWindowShow = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.enterprise{
  .enterprise_head{
    display: flex;
    font-size: 12px;
    line-height: 16px;
    color: #ccc;

    div.enterprise_img{
      width: 80px;
    }

    .title{
      font-size: 14px;
      color: #000;
    }
  }

}

.enterpriseOrigin{
  font-size: 12px;
  line-height: 16px;
  color: #ccc;
.title{
      font-size: 14px;
      color: #000;
    }


}

.origin{
  font-size: 12px;
  line-height: 16px;
  color: #ccc;

  .title{
    font-size: 14px;
      color: #000;
  }
}

.person{
  display: flex;
  font-size: 12px;
  color: #ccc;
  line-height: 18px;

  div.person_img{
      width: 80px;
    }
    .title{
    font-size: 14px;
    line-height: 20px;
      color: #000;
      margin-bottom: 3px;
  }
}

.car{
  font-size: 12px;
  color: #ccc;
  line-height: 16px;

  .title{
    font-size: 14px;
    line-height: 20px;
      color: #000;
  }
}

.infoFooter{
    display: inline;
    font-size: 12px;
    padding: 2px 5px;
    border: 1px solid #000;
    border-radius: 5px;
    cursor: pointer;
}
</style>

